<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>animation 动画</title>
	<style type="text/css">
		.box{
			width: 100px;
			height: 100px;
			background-color: gold;

			/*动画名字,时长,动画方式,延迟时间,次数,原路返回*/
			animation: moving 1s ease 0s infinite alternate;
			/*animation-play-state: paused;*/
		}

		.box:hover{
			/*animation-play-state: running; */
		}

		@keyframes moving{
			from{
				width: 100px;
			}
			to{
				width: 500px;
			}
		}
	</style>
</head>
<body>
	
</body>
</html>